<template>
  <div class="app-container plan-report-box">
    <!-- 搜索数据 -->
    <el-form
      :inline="true"
      class="top-box"
      label-width="68px"
      style="margin-bottom: 20px"
    >
      <el-input
        v-model="queryParams.ppNumber"
        placeholder="销售订单号"
        clearable
      />

      <el-input
        v-model="queryParams.invCode"
        placeholder="物料编码"
        clearable
      />
      <el-input
        v-model="queryParams.invName"
        placeholder="物料名称"
        clearable
      />
      <el-date-picker
        v-if="$route.query.searchType !== 'true'"
        v-model="valueDate"
        type="daterange"
        align="right"
        unlink-panels
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions"
      >
      </el-date-picker>
      <el-form-item>
        <el-button
          type="primary"
          v-hasPermi="['prs:report:query']"
          icon="el-icon-search"
          @click="searchList"
          >搜索
        </el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8 operation-btn">
      <el-col :span="1.5">
        <el-button
          type="primary"
          v-hasPermi="['prs:report:query']"
          plain
          icon="el-icon-menu"
          size="mini"
          @click="checkleAll"
          >查询所有</el-button
        >
      </el-col>

      <el-col :span="1.5">
        <el-button
          type="warning"
          v-hasPermi="['prs:report:export']"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          >导出</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          v-hasPermi="['prs:report:print']"
          plain
          icon="el-icon-printer"
          size="mini"
          @click="handlePrint"
          >打印</el-button
        >
      </el-col>
    </el-row>
    <!-- 打印数据 -->
    <PrintPage
      v-if="printStatus"
      :printData="printData"
      ref="startPrint"
      :title="printName"
    />
    <!--明细 -->
    <el-table
      v-loading="loading"
      ref="tableData"
      :data="basicfileList"
      border
      :height="maxHeight"
    >
      <el-table-column
        type="index"
        width="60"
        align="center"
        label="序号"
        :key="1"
      >
      </el-table-column>
      <el-table-column
        label="销售订单号"
        align="center"
        prop="ppNumber"
        width="130"
      >
        <template slot-scope="scope">
          <div>
            <span
              v-if="scope.row.ppNumber == '' || scope.row.ppNumber == null"
              class="el-icon-minus"
            ></span>
            <span v-else>{{ scope.row.ppNumber }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="完工单号"
        align="center"
        prop="woCode"
        width="120"
      >
      </el-table-column>
      <el-table-column
        label="生产线"
        align="center"
        prop="beltline"
        width="120"
      >
      </el-table-column>
      <el-table-column
        label="物料编码"
        align="center"
        prop="invCode"
        width="120"
      >
      </el-table-column>
      <el-table-column
        label="物料名称"
        align="center"
        prop="invName"
        width="350"
      >
        <template v-slot="scope">
          <div>
            <span>{{ scope.row.invName }} {{ scope.row.invAttribute }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="批号"
        align="center"
        prop="batchNumber"
        width="150"
      >
      </el-table-column>
      <el-table-column
        align="center"
        :label="fmConfig.property[0]"
        width="100"
        v-if="fmConfig.property.length > 0"
        prop="f1"
      >
      </el-table-column>
      <el-table-column
        align="center"
        :label="fmConfig.property[1]"
        width="100"
        v-if="fmConfig.property.length > 1"
        prop="f2"
      >
      </el-table-column>
      <el-table-column
        align="center"
        :label="fmConfig.property[2]"
        width="100"
        v-if="fmConfig.property.length > 2"
        prop="f3"
      >
      </el-table-column>
      <el-table-column
        align="center"
        :label="fmConfig.property[3]"
        width="100"
        v-if="fmConfig.property.length > 3"
        prop="f4"
      >
      </el-table-column>
      <el-table-column
        align="center"
        :label="fmConfig.property[4]"
        width="100"
        v-if="fmConfig.property.length > 4"
        prop="f5"
      >
      </el-table-column>
      <el-table-column label="主计量" align="center" prop="unitName" width="60">
      </el-table-column>
      <el-table-column label="入库时间" align="center" width="160">
        <template slot-scope="scope">
          <div>
            <span
              v-if="
                scope.row.invoiceDate !== '' || scope.row.invoiceDate == null
              "
            >
              {{ inMaterTime(scope.row.invoiceDate) }}
            </span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="入库数量" align="center">
        <template slot-scope="scope">
          <div style="text-align: right">
            <span>{{ scope.row.quantity }}</span>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分类查询分页信息 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getDetailReport"
    />
  </div>
</template>

<script>
import {
  listCheckinReport,
  exportCheckinReport,
  dictMatching,
  billParameters,
} from "../../api/report"; //物料接口
import PrintPage from "../../components/Report/checkinPrint.vue"; //打印组件
export default {
  name: "Recheckin",
  data() {
    return {
      // 遮罩层
      loading: true,
      //单据参数
      fmConfig: {
        property: [],
      },
      //物料数据最大高度
      maxHeight: null,
      //料品大类
      sortData: [],
      //物料大类下标
      sortIndex: null,
      // 开始时间/结束时间配置
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date(
                new Date(new Date().toLocaleDateString()).getTime()
              );
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date(
                new Date(new Date().toLocaleDateString()).getTime()
              );
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date(
                new Date(new Date().toLocaleDateString()).getTime()
              );
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      valueDate: [],
      //明细查询
      queryParams: {
        pageNum: 1,
        pageSize: 100,
        invCode: "",
        invName: "",
        ppNumber: "",
        startDate: "",
        endDate: "",
      },
      planData: [],
      planIndex: null,
      basicfileList: [],
      // 总条数
      total: 0,
      //打印名称
      printName: "",
      printTypeName: "",
      //打印组件状态
      printStatus: false,
      //打印数据
      printData: [],
    };
  },
  created() {
    this.valueDate = [new Date(this.timeMounceDay(new Date())), new Date()];
    this.getParameters().then(() => {
      this.getDetailReport();
    });
  },

  methods: {
    //获取单据参数
    getParameters() {
      return new Promise((resolve, reject) => {
        if (this.$route.query.fmConfig !== undefined) {
          billParameters({
            formPath: this.$route.query.fmConfig,
          }).then((res) => {
            if (res.code == 200) {
              //特殊属性
              if (res.data["inv.property"] !== "null") {
                this.fmConfig.property = res.data["inv.property"].split(",");
              }

              resolve();
            }
          });
        } else {
          this.mmsgError("获取单据参数失败");
        }
      });
    },

    //报表
    getDetailReport() {
      // 日期转换
      if (this.valueDate !== null && this.valueDate !== undefined) {
        if (this.valueDate.length > 0) {
          this.queryParams.startDate = this.parseTime(this.valueDate[0]);
          this.queryParams.endDate = this.parseTime(this.valueDate[1]);
        }
      } else {
        this.queryParams.startDate = "";
        this.queryParams.endDate = "";
      }
      this.loading = true;
      listCheckinReport(this.queryParams).then((res) => {
        if (res.code == 200) {
          this.basicfileList = res.rows;
          this.getDecimal();
          this.total = res.total;
          this.maxHeight = `${document.documentElement.clientHeight}` - 270;
          this.loading = false;
        }
      });
    },

    // 搜索
    searchList() {
      // 日期转换
      if (
        this.valueDate !== undefined &&
        this.valueDate !== null &&
        this.valueDate.length > 0
      ) {
        this.queryParams.startDate = this.parseTime(this.valueDate[0]);
        this.queryParams.endDate = this.setTime(this.valueDate[1]);
      } else {
        this.queryParams.startDate = "";
        this.queryParams.endDate = "";
      }
      this.getDetailReport();
    },

    // 查询所有
    checkleAll() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 100,
        invCode: "",
        invName: "",
        ppNumber: "",
        startDate: "",
        endDate: "",
      };
      this.valueDate = [];
      this.planIndex = null;
      this.getDetailReport();
    },

    //导出
    handleExport() {
      let queryParams = this.queryParams;
      this.$confirm(`是否确认导出生产入库明细表?`, "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return exportCheckinReport(queryParams);
        })
        .then((response) => {
          this.download(response.msg);
        });
    },

    // 打印
    handlePrint() {
      let number = 1;
      this.basicfileList.forEach((item) => {
        item.number = number++;
      });
      this.printData = this.basicfileList;
      this.printName = "生产入库明细表";
      this.printStatus = true;
      setTimeout(() => {
        this.$print(this.$refs.startPrint.$refs.print);
      }, 0);
    },

    // 小数位数
    getDecimal() {
      if (this.basicfileList.length > 0) {
        this.basicfileList.forEach((item) => {
          if (item.quantity !== undefined && item.quantity !== null) {
            item.quantity = parseFloat(item.quantity).toFixed(2);
          }
        });
      }
    },

    //年月日
    inMaterTime(date) {
      let time = new Date(date);
      return (
        time.getFullYear() + "-" + (time.getMonth() + 1) + "-" + time.getDate()
      );
    },

    //年月日时分秒
    inMaterTimeMill(time) {
      let date = new Date(time);
      let year = date.getFullYear(),
        month = date.getMonth() + 1,
        day = date.getDate(),
        hours = date.getHours(),
        minutes = date.getMinutes(),
        seconds = date.getSeconds();

      if (hours == "0") {
        hours = "00";
      }
      if (minutes == "0") {
        minutes = "00";
      }
      if (seconds == "0") {
        seconds = "00";
      }
      return (
        year +
        "-" +
        month +
        "-" +
        day +
        " " +
        hours +
        ":" +
        minutes +
        ":" +
        seconds
      );
    },

    /*获取当月1号 */
    timeMounceDay(date) {
      let time = new Date(date);
      return time.getFullYear() + "-" + (time.getMonth() + 1) + "-" + 1;
    },

    //时间+23时59分59秒
    setTime(date) {
      date.setHours(date.getHours() + 23);
      date.setMinutes(date.getMinutes() + 59);
      date.setSeconds(date.getSeconds() + 59);
      let time = new Date(date);
      return (
        time.getFullYear() +
        "-" +
        (time.getMonth() + 1) +
        "-" +
        time.getDate() +
        " " +
        time.getHours() +
        ":" +
        time.getMinutes() +
        ":" +
        time.getSeconds()
      );
    },

    inMaterTime(date) {
      let time = new Date(date);
      return (
        time.getFullYear() + "-" + (time.getMonth() + 1) + "-" + time.getDate()
      );
    },
  },

  components: {
    PrintPage,
  },
};
</script>
<style lang="scss">
.plan-report-box {
  .el-range-editor--medium.el-input__inner {
    height: 32px;
  }
  .el-input.is-disabled .el-input__inner {
    color: #333;
  }
  .el-range-editor--medium .el-range__icon,
  .el-range-editor--medium .el-range__close-icon,
  .el-range-editor--medium .el-range__icon,
  .el-range-editor--medium .el-range__close-icon,
  .el-range-editor--medium .el-range-separator {
    line-height: 24px;
  }
  .top-box {
    display: flex;
    align-items: center;

    .el-input {
      width: 200px;
      margin-right: 15px;
    }

    .el-date-editor {
      margin-right: 15px;
    }
  }
  .sort-active {
    background: #1890ff !important;
    border-color: #1890ff !important;
    color: #ffffff !important;
  }
  .el-select {
    width: 150px;

    .el-input {
      width: 150px !important;
    }

    margin-right: 15px;

    .el-input__inner {
      width: 150px;
    }
  }

  .el-input--medium .el-input__icon {
    line-height: 28px;
  }

  .el-form-item {
    margin-bottom: 0;
  }
  .material-sort {
    span {
      font-size: 14px;
      padding: 0px 15px;
      background: #f4f4f5;
      color: #999;
      display: inline-block;
      border-radius: 3px;
      margin-left: 5px;
      margin-right: 5px;
      cursor: pointer;
      line-height: 26px;
      border: 1px solid #e9e9eb;
    }
  }
}
</style>
